<template>
    <div class="login">
        <!-- 鼠标移入放大 -->
        <div class="box box1">放大</div>
        <!-- 鼠标移入缩放 -->
        <div class="box box2">缩放</div>
        <!-- 鼠标移入倾斜 -->
        <div class="box box3">倾斜</div>
        <!-- 鼠标移入旋转 -->
        <div class="box box4">旋转</div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    mounted() {
    },
};
</script>

<style scoped>

.box{
    width: 200px;
    height: 200px;
    background: #fff;
    border: 1px solid #ccc;
    margin: 50px 100px;
    display: inline-block;
    text-align: center;
    line-height: 200px;
}

.box1:hover{
    transform: translate(0px,10px);
    box-shadow: 0 0 10px 10px #f4f4f4;
}

.box2{
    width: 400px;
    height: 200px;
    transition: all 0.2s;
}

.box2:hover{
    /* 支持两个参数，水平方向和垂直方向的缩放 */
    /* 一个参数时，水平方向和垂直方向的缩放倍数 */
    transform: scale(1.2);
}

.box3:hover{
    /* 支持两个参数，水平方向和垂直方向的倾斜角度 */
    /* 一个参数时，水平方向和垂直方向的倾斜角度 */
    transform: skew(40deg,30deg);
}

.box4:hover{
    /* 支持两个参数，水平方向和垂直方向的倾斜角度 */
    /* 一个参数时，水平方向和垂直方向的倾斜角度 */
    transform: rotate(40deg);
}
</style>
